<template>
  <view class="orderlist">
    <u-toast ref="uToast"></u-toast>
    <view
      class="item"
      v-if="orderlist"
      v-for="(item, index) in orderlist"
      :key="index"
    >
      <view v-if="item.statusShow" class="order_item_mask"></view>
      <!--外卖-->
      <view
        v-if="item.orderType == 0"
        @click="
          item.statusShow
            ? ''
            : NavTo(
                `/pages/Order/HomeOrderDetails?id=${item.id}&Type=${Type}&orderType=${orderType}&riderClientStatus=${item.riderClientStatus} `
              )
        "
      >
        <!-- 状态栏 -->
        <view class="StatusBar flex_al_cen_ju_bet pos_r">
          <view class="pre pos_a">
            <image
              v-if="item.result"
              src="../../../static/images/pulice/yu.png"
              mode="scaleToFill"
            />
          </view>
          <!-- 外卖 -->
          <view class="Bar flex_al_cen_ju_bet">
            <view style="width: 50rpx"></view>
            <view class="num" v-if="item.dayNum">#{{ item.dayNum }}</view>
            <view
              v-if="item.statusShow"
              class="num"
              style="margin-left: 10rpx"
              >{{ item.status }}</view
            >
            <view class="Time flex" v-else>
              <u-icon
                name="clock"
                :key="index"
                v-if="Type == 0"
                color="#0c22b0"
                size="16"
              ></u-icon>
              <u-icon
                name="clock"
                :key="index"
                v-if="Type != 0"
                :color="item.predictTime - nowSeconds > 0 ? '#0c22b0' : 'red'"
                size="16"
              ></u-icon>

              <view
                class="mar_l_r flex"
                style="color: #0c22b0"
                v-if="item.predictTime - nowSeconds > 0 && Type !== 0"
              >
                剩余
                <u-count-down
                  :key="index"
                  :time="forSeconds(item.predictTime)"
                  format="DD:HH:mm:ss"
                  @change="onChange($event, item)"
                >
                  <view class="times_flex">
                    {{ item.timeData?.hours }}:{{ item.timeData?.minutes }}:{{
                      item.timeData?.seconds
                    }}
                  </view>
                </u-count-down>
              </view>

              <text
                class="red mar_l_r"
                v-if="item.predictTime - nowSeconds < 0 && Type != 0"
                >您已超时 
              </text>
              <text
                class="Song mar_l_r text_ovf"
                v-if="item.predictTime - nowSeconds > 0 && Type != 0"
                >（{{ forHour(item.predictTime) }}之前送达）
              </text>
              <text
                class="Song mar_l_r text_ovf"
                v-if="item.predictTime - nowSeconds < 0 && Type != 0"
              >
                原预计（{{ forHour(item.predictTime) }}之前送达）
              </text>
              <view class="Song mar_l_r text_ovf" v-if="Type == 0">
                <text style="color: #0c22b0">
                  {{ textTime(item.predictTime) }}之前送达
                </text>
              </view>
            </view>
          </view>

          <!-- 价格 -->
          <view class="price red" :class="item.statusShow ? 'color_aa' : 'red'">
            <text>￥</text>
            <text>{{ item.price }}</text>
          </view>
        </view>
        <!-- 地址 + 内容 -->
        <view class="AddR_Cont">
          <!-- 地址 -->
          <Address
            :Type="Type"
            :statusShow="item.statusShow"
            :orderType="orderType"
            :TitleShow="TitleShow"
            :item="item"
          ></Address>
          <!-- 备注 -->
          <view class="remarks text_ovf">
            备注： {{ item.remark || "无" }}</view
          >
		 <view class="E6F5FA" style="color: #6dbffa;
    border: 1px solid #6dbffa;width: 40%;padding: 6rpx;margin: 15rpx;border-radius: 10rpx;"  @click.stop="NavTo(
		     `/pages/message/message?roomsName=${item.merchantName}&id=${item.id}`
		   )"
		   >在线联系商家/用户 </view>
          <!-- 订单类型 -->
          <view class="OrderType flex" v-if="Type == 1">
            <view class="oc22b0" v-if="item.merchantClientStatus == 2"
              >已出餐</view
            >
            <!-- <view class="D43509" v-if="Type == 1 && orderType == 0">送货地址已修改</view> -->
            <view class="E6F5FA" v-if="item.merchantClientStatus == 1"
              >正在备餐</view
            >
		
          </view>
		
          <!-- 按钮状态 -->
          <view class="Botton">
            <!-- 新任务-->
            <view
              class="GrabanOrder"
              @click.stop="makeOrder(orderlist, index)"
              v-if="Type == 0"
            >
              <text>{{ item.Btntitle }}</text>
			
              <timer :Times="forSeconds(item.predictTime)"></timer>
            </view>
            <!-- 待取货 配送中 -->
            <view
              class="GoodsCollected flex_al_cen_ju_bet"
              v-if="Type == 1 || Type == 2"
            >
              <view class="btn_icon_box">
                <view class="phone" @click.stop="getPhoneList(item)">
                  <image
                    v-if="item.riderClientStatus != 4 && !item.statusShow"
                    class="btn_icon"
                    src="../../../static/images/pulice/phone_icon.png"
                    mode=""
                  >
                  </image>
                  <image
                    v-else
                    class="btn_icon"
                    src="../../../static/images/pulice/phone_icon_cc.png"
                    mode=""
                  >
                  </image>
                  <view
                    :class="
                      item.riderClientStatus == 4 || item.statusShow
                        ? 'color_aa'
                        : ''
                    "
                    >联系</view
                  >
                </view>
                <view
                  style="
                    width: 2rpx;
                    height: 40rpx;
                    background-color: #d8d8d8;
                    margin: 0 38rpx;
                  "
                ></view>
                <view class="phone" @click.stop="clickIsShow(item)">
                  <image
                    v-if="
                      item.riderClientStatus == 1 && item.orderStatusOri == 1
                    "
                    class="btn_icon"
                    src="../../../static/images/pulice/convertOrder_icon.png"
                    mode=""
                  ></image>
                  <image
                    v-else
                    class="btn_icon"
                    src="../../../static/images/pulice/convertOrder_icon_cc.png"
                    mode=""
                  ></image>
                  <view
                    :style="{
                      color:
                        item.riderClientStatus == 1 && item.orderStatusOri == 1
                          ? ''
                          : '#AAAAAA',
                    }"
                  >
                    转单
                  </view>
                </view>
              </view>
              <!-- 待取货 -->
              <view
                class="btn"
                :class="item.statusShow ? 'btn_c' : ''"
                @click.stop="takeGoods(item.id, item.riderClientStatus)"
              >
                {{ Type == 1 ? item.BtnSaveTitle : item.statusText }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!--跑腿-->
      <view
        v-else
        @click="
          item.statusShow
            ? ''
            : NavTo(
                `/pages/Order/RunErrandsOrderDetails?id=${item.id}&Type=${Type}&orderType=${item.orderType}&riderClientStatus=${item.currentStatus} `
              )
        "
      >
        <!-- 状态栏 -->
        <view class="StatusBar flex_al_cen_ju_bet pos_r">
          <view class="pre pos_a">
            <image
              v-if="item.isIm == 0"
              src="../../../static/images/pulice/yu.png"
              mode="scaleToFill"
            />
          </view>
          <view class="Bar flex_al_cen_ju_bet">
            <view style="width: 50rpx"></view>
            <view v-if="item.statusShow">{{ item.status }}</view>
            <view class="flex Runerrands" v-else>
              <view class="num">
                帮我{{
                  item.riderDo == 0
                    ? "送"
                    : item.riderDo == 1
                    ? "买"
                    : item.riderDo == 2
                    ? "取"
                    : "买"
                }}
              </view>
              <view class="Time flex">
                <u-icon
                  name="clock"
                  :key="index"
                  color="#0c22b0"
                  size="16"
                ></u-icon>
                <view
                  class="mar_l_r flex"
                  style="color: #0c22b0; font-size: 26rpx"
                  v-if="item.isIm == 0"
                >
                  {{ textTime(item.startTime) }}取货
                </view>
                <view
                  class="mar_l_r flex"
                  style="color: #0c22b0; font-size: 26rpx"
                  v-else
                >
                  立即配送
                </view>
              </view>
            </view>
          </view>

          <!-- 跑腿 -->
          <view class="price" :class="item.statusShow ? 'color_aa' : 'red'">
            ￥
            <text>{{ item.price }}</text>
          </view>
        </view>
        <!-- 地址 + 内容 -->
        <view class="AddR_Cont">
          <!-- 地址 -->
          <Address
            :Type="Type"
            :statusShow="item.statusShow"
            :orderType="orderType"
            :TitleShow="TitleShow"
            :item="item"
          ></Address>
          <!-- 备注 -->
          <view class="remarks text_ovf">
            备注： {{ item.remark || "无" }}</view
          >
          <!-- 跑腿重量 -->
          <view
            class="world_quilaty"
            v-if="orderType == 1"
            :class="item.statusShow ? 'color_aa border_aa' : ''"
          >
            {{ item.articleWeight || 0 }}
          </view>
          <!-- 按钮状态 -->
          <view class="Botton">
            <!-- 新任务-->
            <view
              class="GrabanOrder"
              @click.stop="makeOrder2(item.id, index)"
              v-if="Type == 0"
            >
              <text>{{ item.Btntitle }}</text>
              <timer
                v-if="item.isIm == 1"
                :Times="forSeconds(item.createTime + 60 * 15 * 1000)"
              ></timer>
              <timer
                v-if="item.isIm == 0"
                :Times="forSeconds(item.startTime)"
              ></timer>
            </view>
            <!-- 待取货 配送中 -->
            <view class="GoodsCollected flex_al_cen_ju_bet" v-if="Type !== 0">
              <view class="btn_icon_box">
                <view class="phone" @click.stop="getPhoneList2(item)">
                  <image
                    v-if="item.riderClientStatus != 4 && !item.statusShow"
                    class="btn_icon"
                    src="../../../static/images/pulice/phone_icon.png"
                    mode=""
                  >
                  </image>
                  <image
                    v-else
                    class="btn_icon"
                    src="../../../static/images/pulice/phone_icon_cc.png"
                    mode=""
                  >
                  </image>
                  <view
                    :class="
                      item.riderClientStatus == 4 || item.statusShow
                        ? 'color_aa'
                        : ''
                    "
                    >联系</view
                  >
                </view>
                <view
                  style="
                    width: 2rpx;
                    height: 40rpx;
                    background-color: #d8d8d8;
                    margin: 0 38rpx;
                  "
                ></view>
                <view class="phone" @click.stop="clickIsShow2(item)">
                  <image
                    v-if="
                      item.riderClientStatus == 1 && item.orderStatusOri == 1
                    "
                    class="btn_icon"
                    src="../../../static/images/pulice/convertOrder_icon.png"
                    mode=""
                  ></image>
                  <image
                    v-else
                    class="btn_icon"
                    src="../../../static/images/pulice/convertOrder_icon_cc.png"
                    mode=""
                  ></image>
                  <view
                    :style="{
                      color:
                        item.riderClientStatus == 1 && item.orderStatusOri == 1
                          ? ''
                          : '#AAAAAA',
                    }"
                    >转单
                  </view>
                </view>
              </view>

              <!-- 待取货 -->
              <view
                class="btn"
                :class="item.statusShow ? 'btn_c' : ''"
                @click.stop="
                  takeGoods2(item.id, item.currentStatus, item.riderDo)
                "
                v-if="item.riderDo == 1"
              >
                {{ item.BtnSaveTitle }}
              </view>
              <!-- 配送中 -->
              <view class="distribution flex" v-if="item.riderDo !== 1">
				 
                <view
                  class="Pickup"
                  :class="item.statusShow ? 'btn_c' : ''"
                  @click.stop="
                    takeGoods2(item.id, item.currentStatus, item.riderDo)
                  "
                >
                  {{ item.statusText }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <MyDialog
      :isShowDialog="isCommitConfirm"
      descTxt="是否确认送达？"
      @commit="onCommitClick"
	  @cancel="onCancelClick" 
    ></MyDialog>
  </view>
</template>
<script setup lang="ts">
import {
  forHour,
  forSeconds,
  forNowTime,
  forDate,
  textTime,
} from "@/utlis/time";
import type { Order } from "@/TS/Hooks/Home/components/Order";
import { NavTo } from "@/utlis/uni_api";
import orderMake from "@/Hooks/Home/components/Order";
import timer from "@/components/timer.vue";
import {
  reactive,
  getCurrentInstance,
  defineProps,
  ref,
  defineEmits,
  onMounted,
} from "vue";

const { proxy } = getCurrentInstance() as any;
const Props = defineProps<props>();

interface props {
  Type?: number; // 0:新任务 1:待取货 2:配送中
  orderlist: any;
  orderType: number; // {0,1}  0 外卖  1跑腿
}
onMounted(() => {
  console.log("订单页", Props.orderType,Props.orderlist);
});
/*订单类型  orderType {0,1}  0 外卖  1跑腿
   订单状态 Type{0,1,2}  0 新任务  1 待配送    2 配送中
   */
const TitleShow = ref<boolean>(true);
let timeData = reactive<Order.timeData>({});

// 子传父
interface Emit {
  (event: "Graban", id: number): void;

  (event: "makeOrder", id: number): void;

  (event: "makeOrder2", id: number): void;

  (event: "setSkipModel", SkipModel: boolean): void;

  (event: "setSendCodeModel", data: any): void;
}

const Emit = defineEmits<Emit>();
const {
  makeOrder,
  makeOrder2,
  callPhone,
  takeGoods,
  takeGoods2,
  isCommitConfirm,
  onCommitClick,
  clickIsShow,
  clickIsShow2,
  getPhoneList,
  onCancelClick,
  getPhoneList2,
} = orderMake(proxy, Emit, Props);

const timesTamp = new Date();
const nowSeconds = timesTamp.getTime();

const onChange = (e: any, item: any) => {
  // 为每个 item 动态创建一个 timeData 属性来存储独立的倒计时数据
  item.timeData = {
    hours: e.hours >= 10 ? e.hours : "0" + e.hours,
    minutes: e.minutes >= 10 ? e.minutes : "0" + e.minutes,
    seconds: e.seconds >= 10 ? e.seconds : "0" + e.seconds,
  };
};
</script>

<style lang="scss" scoped>
@import "../../../static/css/Home/orderlist.scss";
</style>
